import { createApp } from 'vue'
import { createPinia } from 'pinia'
import ElementPlus, { ElMessage } from 'element-plus'
import 'element-plus/dist/index.css'
import 'element-plus/theme-chalk/dark/css-vars.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'

import App from './App.vue'
import router from './router'
import { setupAxios } from './utils/request'
import './styles/index.scss'

// Import Video.js CSS
import 'video.js/dist/video-js.css'

const app = createApp(App)

// Create Pinia store
const pinia = createPinia()

// Setup axios interceptors
setupAxios()

// Use plugins
app.use(pinia)
app.use(router)
app.use(ElementPlus, {
  locale: zhCn,
  size: 'default'
})

// Register Element Plus icons
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

// Global error handler
app.config.errorHandler = (err, vm, info) => {
  console.error('Vue error:', err, info)
  ElMessage.error('应用程序发生错误，请刷新页面重试')
}

// Global warning handler
app.config.warnHandler = (msg, vm, trace) => {
  console.warn('Vue warning:', msg, trace)
}

// Global properties
app.config.globalProperties.$ELEMENT = {
  size: 'default',
  zIndex: 3000
}

// Performance monitoring
if (import.meta.env.DEV) {
  app.config.performance = true
}

// Mount app
app.mount('#app')

// Hide loading screen
setTimeout(() => {
  const loading = document.getElementById('loading')
  if (loading) {
    loading.style.opacity = '0'
    setTimeout(() => {
      loading.style.display = 'none'
    }, 300)
  }
}, 500)

console.log('🚀 ONVIF Manager Frontend Started')
console.log('📱 Environment:', import.meta.env.MODE)
console.log('🔗 API Base URL:', import.meta.env.VITE_API_BASE_URL || '/api')
